﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/Admin.Master" AutoEventWireup="true" CodeBehind="CustomizeEditor.aspx.cs" Inherits="Cms.Web.UI.Admin.CustomizeEditor" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script language="javascript" type="text/javascript" src="/Admin/edit_area/edit_area_loader.js"></script>
    <script language="javascript" type="text/javascript" src="/Admin/Js/Edit.js"></script>
    <script language="javascript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            cms.Edit.ShowTabOverlays();
        });

        var customJsonEditorLoaded = false;
        var initJavascriptEditorLoaded = false;

        function editorLoaded(id) {
            if (id == "txtCustomJson")
                customJsonEditorLoaded = true;
            if (id == "txtInitJavascript")
                initJavascriptEditorLoaded = true;
            if (customJsonEditorLoaded && initJavascriptEditorLoaded) {
                editAreaLoader.setValue("txtInitJavascript", originalInitJavascript);
                editAreaLoader.setValue("txtCustomJson", originalCustomJson);
                cms.Edit.HideTabOverlays();
            }
            if (document.getElementById("ctl00_body_pnlInitJavascript").offsetLeft >= 0) {
                editAreaLoader.toggle("txtInitJavascript");
                editAreaLoader.toggle("txtInitJavascript");
            }
            if (document.getElementById("ctl00_body_pnlCustomJson").offsetLeft >= 0) {
                editAreaLoader.toggle("txtCustomJson");
                editAreaLoader.toggle("txtCustomJson");
            }
        }

        editAreaLoader.init({
            id: "txtInitJavascript",
            syntax: "cpp",
            start_highlight: true,
            allow_resize: "no",
            allow_toggle: false,
            toolbar: "undo,redo,change_smooth_selection,reset_highlight,highlight,syntax_selection",
            word_wrap: true,
            replace_tab_by_spaces: 4,
            EA_load_callback: "editorLoaded"
        });

        editAreaLoader.init({
            id: "txtCustomJson",
            syntax: "cpp",
            start_highlight: true,
            allow_resize: "no",
            allow_toggle: false,
            toolbar: "undo,redo,change_smooth_selection,reset_highlight,highlight,syntax_selection",
            word_wrap: true,
            replace_tab_by_spaces: 4,
            EA_load_callback: "editorLoaded"
        });

        function updateCode() {
            txtInitJavascript = document.getElementById("txtInitJavascript");
            txtCustomJson = document.getElementById("txtCustomJson");
            txtInitJavascript.value = editAreaLoader.getValue("txtInitJavascript");
            document.getElementById("ctl00_body_hidInitJavascript").value = txtInitJavascript.value;
            txtCustomJson.value = editAreaLoader.getValue("txtCustomJson");
            document.getElementById("ctl00_body_hidCustomJson").value = txtCustomJson.value;
        }

        function setCodeEditorHeight() {
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            var initJavascriptContainer = document.getElementById("initJavascriptContainer");
            var customJsonContainer = document.getElementById("customJsonContainer");
            var initJavascriptHeight = viewportHeight - iLib.Pos.FindY(initJavascriptContainer) - 65;
            initJavascriptHeight = initJavascriptHeight < 100 ? 100 : initJavascriptHeight;
            initJavascriptContainer.style.height = initJavascriptHeight + "px";
            var customJsonHeight = viewportHeight - iLib.Pos.FindY(customJsonContainer) - 65;
            customJsonHeight = customJsonHeight < 100 ? 100 : customJsonHeight;
            customJsonContainer.style.height = customJsonHeight + "px";
        }

        function updatePanels(tab) {
            var pnlInitJavascript = document.getElementById("ctl00_body_pnlInitJavascript");
            var pnlCustomJson = document.getElementById("ctl00_body_pnlCustomJson");
            var width = pnlInitJavascript.offsetWidth;
            pnlInitJavascript.style.position = "absolute";
            pnlInitJavascript.style.left = -10000 + "px";
            pnlInitJavascript.style.width = width + "px";
            pnlInitJavascript.style.top = "0px";
            pnlCustomJson.style.position = "absolute";
            pnlCustomJson.style.left = -10000 + "px";
            pnlCustomJson.style.width = width + "px";
            pnlCustomJson.style.top = "0px";
            switch (tab) {
                case "initJavascript":
                    pnlInitJavascript.style.position = "";
                    pnlInitJavascript.style.width = "100%";
                    pnlInitJavascript.style.left = "0px";
                    break;
                case "customJson":
                    pnlCustomJson.style.position = "";
                    pnlCustomJson.style.width = "100%";
                    pnlCustomJson.style.left = "0px";
                    break;
            }
        }

        var txtInitJavascript;
        var txtCustomJson;

        var originalInitJavascript;
        var originalCustomJson;

        function init() {
            setCodeEditorHeight();
            txtInitJavascript = document.getElementById("txtInitJavascript");
            txtCustomJson = document.getElementById("txtCustomJson");
            originalInitJavascript = document.getElementById("ctl00_body_hidInitJavascript").value;
            originalCustomJson = document.getElementById("ctl00_body_hidCustomJson").value;
            editAreaLoader.setValue("txtInitJavascript", originalInitJavascript);
            editAreaLoader.setValue("txtCustomJson", originalCustomJson);
        }

        function isDirty() {
            var value = originalInitJavascript != txtInitJavascript.value ||
	                    originalCustomJson != txtCustomJson.value;
            document.getElementById("ctl00_tabs_hidIsDirty").value = value;
            return value;
        }
	    //]]>
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="buttons" runat="server">
    <asp:LinkButton ID="lbSave" runat="server" OnClick="lbSave_Click" CssClass="orangeButton" OnClientClick="isDirty(); updateCode();"><span id="lblSave1" runat="server"><span id="lblSave2" runat="server"><img id="imgSave" runat="server" src="Admin/Img/icons/disk.png" alt="" /><span id="lblSave3" runat="server"><cms:LocalizedLiteral ID="llSave" runat="server" /></span></span></span></asp:LinkButton>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="tabs" runat="server">
    <asp:UpdatePanel ID="upnlTabs" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
        <ContentTemplate>
            <cms:AdminTabStrip ID="tabStrip" runat="server" SelectedValue="customJson" OnChange="tabStrip_Click">
                <cms:AdminTabItem ID="tiCustomJson" runat="server" value="customJson" EnabledImage="Admin/Img/icons/cog.png"><cms:LocalizedLiteral ID="llCustomJsonTab" runat="server" /></cms:AdminTabItem>
                <cms:AdminTabItem ID="tiInitJavascript" runat="server" value="initJavascript" EnabledImage="Admin/Img/icons/script_code.png"><cms:LocalizedLiteral ID="llInitJavascriptTab" runat="server" /></cms:AdminTabItem>
            </cms:AdminTabStrip>
            <input type="hidden" id="hidIsDirty" runat="server" />
            <input type="hidden" id="hidSave" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="body" runat="server">
    <asp:Literal ID="litIcon" runat="server" Visible="false" Text="Admin/Img/Icons/script_edit.png" />

    <asp:Panel ID="pnlCustomJson" runat="server" CssClass="pnlTab">
        <asp:UpdatePanel ID="upnlCustomJson" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <input type="hidden" id="hidCustomJson" runat="server" />
                <input type="hidden" id="hidSaveCustomJson" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <div id="customJsonContainer" style="height: 400px;">
            <textarea id="txtCustomJson" cols="10" rows="10" style="width: 100%; height: 100%;"></textarea>
        </div>
        <div class="pnlTabOverlay"></div>
    </asp:Panel>
    
    <asp:Panel ID="pnlInitJavascript" runat="server" CssClass="pnlTab">
        <asp:UpdatePanel ID="upnlInitJavascript" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <input type="hidden" id="hidInitJavascript" runat="server" />
                <input type="hidden" id="hidSaveInitJavascript" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <div id="initJavascriptContainer" style="height: 400px;">
            <textarea id="txtInitJavascript" cols="10" rows="10" style="width: 100%; height: 100%;"></textarea>
        </div>
        <div class="pnlTabOverlay"></div>
    </asp:Panel>
    
    <script language="javascript">
        //<![CDATA[
        iLib.Dom.AddListener(window, "load", init);
        cms.Ajax.Init();
        cms.Ajax.AddEndRequestHandler(function () {
            editAreaLoader.setValue("txtInitJavascript", document.getElementById("ctl00_body_hidInitJavascript").value);
            editAreaLoader.setValue("txtCustomJson", document.getElementById("ctl00_body_hidCustomJson").value);
            cms.Edit.HideTabOverlays();
            if (document.getElementById("ctl00_body_pnlInitJavascript").offsetLeft >= 0) {
                editAreaLoader.toggle("txtInitJavascript");
                editAreaLoader.toggle("txtInitJavascript");
            }
            if (document.getElementById("ctl00_body_pnlCustomJson").offsetLeft >= 0) {
                editAreaLoader.toggle("txtCustomJson");
                editAreaLoader.toggle("txtCustomJson");
            }
        });
        //]]>
    </script>
</asp:Content>
